<template>
    <div class="primary">
        <PersonalHeader :content="1"></PersonalHeader>

        <section class="primarymain">
            <section class="type">
                <h2 class="title"> {{$t('email[0]')}}
                    <p>{{$t('email[1]')}}</p>
                </h2>
                <ul class="contt">
                    <el-form label-position="top" label-width="80px" :model="formLabelAlign" :rules="rules" ref="ruleForm" prop="name">
                        <el-form-item :label="$t('email[2]')"  prop="email">
                            <el-input v-model="formLabelAlign.email" :placeholder="$t('email[4]')"></el-input>
                        </el-form-item>
                        <el-form-item :label="$t('mobile[9]')" prop="code">
                            <el-input v-model="formLabelAlign.v_code" :placeholder="$t('zijin[5]')" >
                                <template slot="append">
                                    <el-button @click="Verificationfun()">{{Verification.text}}</el-button>
                                </template>
                            </el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="handleSubmit" :loading="loading">{{$t('senior[8]')}}</el-button>
                        </el-form-item>
                    </el-form>
                </ul>
            </section>
        </section>
    </div>
</template>

<script>
import { emailBind } from '@/api/securitycenter'
import PersonalHeader from "_dom/personalheader";
import { Passwordencryption, EmailSms } from "@/libs/util";
export default {
    name: 'syemail',
        data () {
            var validatePass1 = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error(this.$t('email[3]')));
                } else if (EmailSms(value)) {
                    if(this.$public.email(value)){
                        callback();
                    }else{
                        callback(new Error(this.$t('reg[10]')));
                    };
                } else {
                    // if(this.$public.phone(value)){
                        // callback();
                    // }else{
                        callback(new Error(this.$t('email[3]')));
                    // };
                }
            };
            return {
                formLabelAlign:{
                    email:"",
                    v_code:"",
                },
                Verification:{
                    text:  this.$t('reg[0]'),
                    time: 60,
                    type: true,
                    timer: "",
                },
                loading: false,
                rules: {
                    email: [
                        { validator: validatePass1, trigger: 'blur' }
                    ],
                    code: [
                        // { required: false, message: this.$t('mobile[15]'), trigger: 'change' }
                    ],
                },
            }
        },
        methods: {
            handleSubmit(){//修改登录密码
                this.$refs['ruleForm'].validate((valid) => {
                    if (valid) {
                        this.loading = true;
                        emailBind(this.formLabelAlign).then(res => {
                            this.loading = false;
                                this.$message({
                                    message: this.$t('email[6]'),
                                    type: 'success'
                                });
                                setTimeout(() => {
                                    this.$router.push({ path:"/securitycenter" });
                                }, 800);
                           
                        }).catch(err => {

                        });
                    }
                })
            },
            Verificationfun(){
                if(!this.formLabelAlign.email){
                    this.$message.error(this.$t('mobile[13]'));
                    return false;
                };
                if(!EmailSms(this.formLabelAlign.email)){
                  this.$message.error(this.$t('mobile[13]'));
                  return false;
                }
                if(!this.Verification.type){
                    return false;
                }
                var _data = {
                    type: "2",
                    phone: this.formLabelAlign.email,
                };
                this.$public.captcha(_data, this);
            },
            typecaptcha(){
                this.Verification.type = false;
                this.Verification.timer = setInterval(() => {
                    this.Verification.time--;
                    if(this.Verification.time< 1){
                        clearInterval(this.Verification.timer);
                        this.Verification.type = true;
                        this.Verification.time = 60;
                        this.Verification.text = this.$t('reg[1]');
                    }else{
                        this.Verification.text = this.Verification.time + "S";
                    }
                }, 1000);
            }
        },
        created(){

        },
        beforeEach: function(to, from, next){
            clearInterval(this.Verification.timer);
            next();
        },
        components: {
            PersonalHeader
        },
    }
</script>

